import React from 'react'
import {Modal} from 'antd'
import styles from './index.less'

export default class MyImage extends React.Component {
  state = {
    visible: false
  }
  toggleVisible = () => {
    const {visible} = this.state
    this.setState({
      visible: !visible
    })
  }
  render() {
    const {visible} = this.state
    const {src} = this.props
    return (
      <div className={styles.container}>
        {src ? <img onClick={this.toggleVisible} src={`${src}`} /> : <span>没有图片</span>}
        <Modal
          visible={visible}
          onCancel={this.toggleVisible}
          footer={null}
        >
          {src && <img src={src} className={styles.preview} />}
        </Modal>
      </div>
    )
  }
}
